<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2018-2020 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<table *ngIf="tableType === tableTypes.DeploymentArtifacts" class="toscatype-table" style="">
    <thead>
    <tr>
        <th>Name</th>
        <th>DA-Ref</th>
        <th>Type</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let da of currentToscaTypeData">
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(daname)">
            <div #daname (click)="openDeploymentArtifactModal(da)">{{ da.name }}</div>
            <span class="cell-comment">{{ da.name }}</span>
        </td>
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(daref)">
            <div #daref (click)="clickArtifactRef(da.artifactRef)">{{ da.artifactRef | localname }}</div>
            <span class="cell-comment">{{ da.artifactRef | localname }}</span>
        </td>
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(datype)">
            <div #datype (click)="clickArtifactType(da.artifactType)">{{ da.artifactType | localname }}</div>
            <span class="cell-comment">{{ da.artifactType | localname }}</span>
        </td>
    </tr>
    </tbody>
</table>

<table *ngIf="tableType === tableTypes.YamlArtifacts" class="toscatype-table" style="">
    <thead>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>File</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let artifact of currentToscaTypeData">
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(aname)">
            <div #aname (click)="openYamlArtifactModal(artifact)">{{ artifact.id }}</div>
            <span class="cell-comment">{{ artifact.id }}</span>
        </td>
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(atype)">
            <div #atype (click)="clickArtifactType(artifact.type)">{{ artifact.type | localname }}</div>
            <span class="cell-comment">{{ artifact.type | localname }}</span>
        </td>
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(afile)">
            <div #afile (click)="clickArtifactFile(artifact)">{{ artifact.file }}</div>
            <span class="cell-comment">{{ artifact.file }}</span>
        </td>
    </tr>
    </tbody>
</table>

<table *ngIf="tableType === tableTypes.Policies" class="toscatype-table">
    <thead>
    <tr>
        <th>Name</th>
        <th *wineryRepositoryHideOnFeature="'yaml'">Policy</th>
        <th>Type</th>
        <th *wineryRepositoryShowOnFeature="'yaml'">Is Active?</th>
    </tr>
    </thead>
    <tbody *wineryRepositoryShowOnFeature="'yaml'">
    <tr *ngFor="let pol of currentToscaTypeData">
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(pname)">
            <div #pname (click)="openPolicyModal(pol)">{{ pol.name }}</div>
            <span class="cell-comment">{{ pol.name }}</span>
        </td>
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(ptype)">
            <div #ptype (click)="clickPolicyType(pol.policyType)">{{ pol.policyType | localname }}</div>
            <span class="cell-comment">{{ pol.policyType | localname }}</span>
        </td>
        <td class="toscatype-table-td">
            <div style="margin-left: 2px; margin-top: 4px;">
                <input type="checkbox" id="isActiveCheckbox" [checked]="isYamlPolicyActiveForNode(pol)"
                       (change)="toggleYamlPolicy(pol)">
                <label for="isActiveCheckbox"></label>
            </div>
        </td>
    </tr>
    </tbody>
    <tbody *wineryRepositoryHideOnFeature="'yaml'">
    <tr *ngFor="let pol of currentToscaTypeData">
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(pname)">
            <div #pname (click)="openPolicyModal(pol)">{{ pol.name }}</div>
            <span class="cell-comment">{{ pol.name }}</span>
        </td>
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(pref)">
            <div #pref (click)="clickPolicyRef(pol.policyRef)">{{ pol.policyRef | localname }}</div>
            <span class="cell-comment">{{ pol.policyRef | localname }}</span>

        </td>
        <td class="toscatype-table-td"
            [class.cell-with-comment]="isEllipsisActive(ptype)">
            <div #ptype (click)="clickPolicyType(pol.policyType)">{{ pol.policyType | localname }}</div>
            <span class="cell-comment">{{ pol.policyType | localname }}</span>
        </td>
    </tr>
    </tbody>
</table>

<div *ngIf="tableType === tableTypes.Capabilities || tableType === tableTypes.Requirements">

    <table *wineryRepositoryHideOnFeature="'yaml'"
           class="toscatype-table">
        <thead>
        <tr>
            <th *ngIf="tableType === tableTypes.Capabilities" width="25px"></th>
            <th>Endpoint</th>
            <th>Id</th>
            <th>Name</th>
            <th *ngIf="tableType === tableTypes.Requirements"></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let reqOrCap of currentToscaTypeData">
            <td *ngIf="tableType === tableTypes.Capabilities" class="toscatype-table-td">
                <button type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
                        style="font-size: x-small;" id="{{currentNodeData.nodeTemplate.id +'.'+ reqOrCap.id}}">
                    <i class="fa fa-dot-circle-o" aria-hidden="true"></i> {{""}}
                </button>
            </td>
            <td class="toscatype-table-td"
                [class.cell-with-comment]="isEllipsisActive(reqOrCapType)">
                <div #reqOrCapType (click)="clickReqOrCapType(reqOrCap.type)">{{ reqOrCap.type | localname }}</div>
                <span class="cell-comment">{{ reqOrCap.type | localname }}</span>
            </td>
            <td class="toscatype-table-td"
                [class.cell-with-comment]="isEllipsisActive(reqOrCapName)">
                <div #reqOrCapName
                     (click)="showExistingReqOrCapModal(reqOrCap.id, editOperation)">{{ reqOrCap.id }}</div>
                <span class="cell-comment">{{ reqOrCap.name }}</span>
            </td>
            <td class="toscatype-table-td"
                [class.cell-with-comment]="isEllipsisActive(reqOrCapRef)">
                <div #reqOrCapRef (click)="clickReqOrCapRef(reqOrCap.name)">{{ reqOrCap.name }}</div>
                <span class="cell-comment">{{ reqOrCap.name }}</span>
            </td>
            <td *ngIf="tableType === tableTypes.Requirements" class="toscatype-table-td">
                <div (mousedown)="passCurrentType($event);
            reqCapRelationshipService.createSourceInfo(this.currentNodeData, reqOrCap);">
                    <div class="btn-group-vertical center-block" role="group" id={{dragSource}} style="width: 100%;">
                        <button *ngFor="let rel of entityTypes.relationshipTypes"
                                type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
                                style="font-size: xx-small;">{{rel.id}}
                        </button>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <div *wineryRepositoryShowOnFeature="'yaml'">
        <table *ngIf="tableType === tableTypes.Requirements"
               class="toscatype-table">
            <thead>
            <tr>
                <th>Name</th>
                <th>Current Relationship</th>
                <th>Possible Relationships</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let req of sortBy(currentToscaTypeData, 'name')">
                <td class="toscatype-table-td"
                    [class.cell-with-comment]="isEllipsisActive(reqRef)">
                    <div #reqRef (click)="clickYamlReqRef()">{{ req.name }}</div>
                    <span class="cell-comment">{{ req.name }}</span>
                </td>
                <td class="toscatype-table-td" *ngIf="req.relationship"
                    [class.cell-with-comment]="isEllipsisActive(reqRelationship)">
                    <div #reqRelationship
                         (click)="clickYamlRelationshipTemplateId(req.relationship, req)">{{req.relationship}}</div>
                    <span class="cell-comment">{{ req.relationship }}</span>
                </td>
                <td class="toscatype-table-td" *ngIf="!req.relationship"> N/A</td>
                <td class="toscatype-table-td" *ngIf="isRequirementFulfilled(req); else newRelationship">

                    <div class="btn-group-vertical center-block" role="group" id={{dragSource}}
                         style="width: 100%;">
                        <button *ngFor="let rel of getAllowedRelationshipTypes(req)"
                                [disabled]="true"
                                type="button"
                                class="reqCap-button btn btn-sm btn-outline-secondary btn-block tooltip"
                                title="{{rel.qName}}"
                                style="font-size: xx-small;">
                            {{rel.id}}
                        </button>
                    </div>
                </td>
                <ng-template #newRelationship>
                    <td class="toscatype-table-td">
                        <div (mousedown)="passCurrentType($event);
            reqCapRelationshipService.createSourceInfo(this.currentNodeData, req);">
                            <div class="btn-group-vertical center-block" role="group" id={{dragSource}}
                                 style="width: 100%;">
                                <button *ngFor="let rel of getAllowedRelationshipTypes(req)"
                                        type="button"
                                        title="{{rel.qName}}"
                                        class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
                                        style="font-size: xx-small;">
                                    {{rel.id}}
                                </button>
                            </div>
                        </div>
                    </td>
                </ng-template>
            </tr>
            </tbody>
        </table>

        <table *ngIf="tableType === tableTypes.Capabilities"
               class="toscatype-table">
            <thead>
            <tr>
                <th *ngIf="tableType === tableTypes.Capabilities" width="25px"></th>
                <th>Name</th>
                <th>Type</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let cap of currentToscaTypeData">
                <td class="toscatype-table-td">
                    <button type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
                            style="font-size: x-small;" id="{{currentNodeData.nodeTemplate.id +'.'+ cap.id}}">
                        <i class="fa fa-dot-circle-o" aria-hidden="true"></i> {{''}}
                    </button>
                </td>
                <td class="toscatype-table-td" [class.cell-with-comment]="isEllipsisActive(capName)">
                    <div #capName (click)="clickYamlCapRef()">{{ cap.name }}</div>
                    <span class="cell-comment">{{ cap.name }}</span>
                </td>
                <td class="toscatype-table-td"
                    [class.cell-with-comment]="isEllipsisActive(capType)">
                    <div #capType (click)="clickReqOrCapType(cap.type)">{{ cap.type | localname }}</div>
                    <span class="cell-comment">{{ cap.type }}</span>
                </td>
                <td class="toscatype-table-td">
                    <div class="btn-group-vertical center-block" role="group" style="width: 100%"
                         (click)="showExistingReqOrCapModal(cap.id, editOperation)">
                        <button type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
                                style="font-size: xx-small;">
                            Edit
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

